import React from 'react';
import { connect } from 'dva';
import {ArrowUpOutlined, DeleteOutlined, ArrowDownOutlined} from '@ant-design/icons';
import { Layout, Button } from 'antd';
import BaseComponent from 'components/BaseComponent';
import Toolbar from 'components/Toolbar';
import SearchBar from 'components/SearchBar';
import DataTable from 'components/DataTable';
import { ModalForm } from 'components/Modal';
import createColumns, {createFormCloumns} from './columns';
import $$ from 'cmn-utils';
const { Content, Header, Footer } = Layout;
const Pagination = DataTable.Pagination;

@connect(({ exams, loading }) => ({
  exams,
  loading: loading.models.exams
}))
export default class extends BaseComponent {
  state = {
    record: null,
    visible: false,
    rows: [],
    importFormVisible: null,
  };

  handleDelete = records => {
    const { rows } = this.state;
    this.props.dispatch({
      type: 'exams/remove',
      payload: {
        records,
        success: () => {
          // 如果操作成功，在已选择的行中，排除删除的行
          this.setState({
            rows: rows.filter(
              item => !records.some(jtem => jtem.id === item.id)
            )
          });
        }
      }
    });
  };

  onImport = ()=>{
    this.setState({
      importFormVisible: true,
    })
  };

  onPublish = (record)=>{
    this.props.dispatch({
      type: 'exams/publishExam',
      payload: {
        record,
      }
    })
  };

  onDownloadTemp = ()=>{
    $$.download('/exam-template.xlsx');
  };

  render() {
    const { exams, loading, dispatch } = this.props;
    const { pageData, categoryList } = exams;
    const columns = createColumns(this, categoryList);
    const formColumns = createFormCloumns(this, categoryList);
    const { rows, record, visible, importFormVisible } = this.state;

    const searchBarProps = {
      columns,
      onSearch: values => {
        dispatch({
          type: 'exams/getPageInfo',
          payload: {
            pageData: pageData.filter(values).jumpPage(1, 10)
          }
        });
      }
    };

    const dataTableProps = {
      loading,
      columns,
      rowKey: 'id',
      dataItems: pageData,
      selectType: 'checkbox',
      showNum: true,
      isScroll: true,
      selectedRowKeys: rows.map(item => item.id),
      onChange: ({ pageNum, pageSize }) => {
        dispatch({
          type: 'exams/getPageInfo',
          payload: {
            pageData: pageData.jumpPage(pageNum, pageSize)
          }
        });
      },
      onSelect: (keys, rows) => this.setState({ rows })
    };

    const modalFormProps = {
      loading,
      record,
      visible,
      columns,
      modalOpts: {
        width: 700
      },
      onCancel: () => {
        this.setState({
          record: null,
          visible: false
        });
      },
      onSubmit: values => {
        dispatch({
          type: 'exams/update',
          payload: {
            values,
            success: () => {
              this.setState({
                record: null,
                visible: false
              });
            }
          }
        });
      }
    };

    const importFormProps = {
      loading,
      visible: importFormVisible,
      columns: formColumns,
      modalOpts: {
        width: 700
      },
      onCancel: () => {
        this.setState({
          importFormVisible: false
        });
      },
      onSubmit: values =>{
        dispatch({
          type: 'exams/import',
          payload: {
            values,
            success: () => {
              this.setState({
                importFormVisible: false
              });
            },
          }
        });
      }
    };

    return (
      <Layout className="full-layout">
        <Header>
          <Toolbar
            appendLeft={
              <Button.Group>
                {/*<Button type="primary" icon={<PlusOutlined />} onClick={this.onAdd}>*/}
                {/*  新增*/}
                {/*</Button>*/}
                <Button type="primary" icon={<ArrowUpOutlined/>} onClick={this.onImport}>
                  新增
                </Button>
                <Button type="default" icon={<ArrowDownOutlined/>} onClick={this.onDownloadTemp}>
                  下载模板
                </Button>
                <Button
                  disabled={!rows.length}
                  onClick={e => this.onDelete(rows)}
                  icon={<DeleteOutlined />}
                >
                  删除
                </Button>
              </Button.Group>
            }
            // pullDown={<SearchBar type="grid" {...searchBarProps} />}
          >
            <SearchBar group="abc" {...searchBarProps} />
          </Toolbar>
        </Header>
        <Content>
          <DataTable {...dataTableProps} />
        </Content>
        <Footer>
          <Pagination {...dataTableProps} />
        </Footer>
        <ModalForm {...modalFormProps} />
        <ModalForm {...importFormProps}/>
      </Layout>
    );
  }
}
